<template>
  <div>
    <!-- 首页面 -->
    <!-- 轮播图 -->
    <div class="slideshow">
      <Slideshow />
      <!-- 二级导航 -->
      <div class="nav_two">
        <NavTwo></NavTwo>
      </div>
    </div>
    <br>
<p class="style-hui"> </p>
    <div class="list_card">
      <p class="list_card_title">
        <span @click="pdetails">全民砍价</span>
        <span>
          <van-icon name="arrow" />
        </span>
      </p>
      <ListCard :goods="list"></ListCard>
    </div>
    
<p class="style-hui"> </p>

    <p class="article-title" @click="gotojx">
      精选专题
    </p>
    <div> 
      <Details />
    </div>
    <p class="style-hui"> </p>
     <p class="article-title">
      人气推荐
    </p>
    <div>
      <ListCardTwo :goods="list"></ListCardTwo>
    </div>
  
  </div>
</template>

<script>
//轮播
import Slideshow from "../components/home/Slideshow";
//二级导航
import NavTwo from "../components/home/NavTwo";
//商品列表
import ListCard from "../components/home/ListCard";
//商品分类
import Details from "../components/home/Details";
//商品列表2
import ListCardTwo from "../components/home/ListCardTwo";
export default {
  components: {
    Slideshow,
    NavTwo,
    ListCard,
    Details,
    ListCardTwo
  },
  data() {
    return {
     
    };
  },
  //请求商品列表
  mounted() {
    this.$store.dispatch("getList")
  },
  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
    list:function(){
      return this.$store.state.listModule.listItems
    }
  },
  methods: {
    pdetails(){
      this.$router.push({
        path:'/productdetails',
       
      })
    },
    gotojx(){
      this.$router.push({
        path:'/choiceness'
      })
    }
  },
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.slideshow {
  width: 100%;
}
.nav_two {
  width: 100%;
  border-radius: 60px 60px 0px 0px;
  position: absolute;
  top: 2.4rem;
}
.list_card {
  /* border: 1px solid #000; */
  width: 100%;
  margin-top: 0.2rem;
}
.list_card_title {
  width: 100%;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  border-bottom: 1px solid #eee;
  padding: 0.3rem 0rem;
}
.list_card_title span {
  font-size: 0.35rem;
}
.list_card_title span:nth-child(2) {
  line-height: 0.5rem;
}
.article-title{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.35rem !important;
  border-bottom: 1px solid #eee;
  margin-bottom: 0.2rem;
}
.style-hui{
  padding-top: 0.35rem;
  background: #eee;
}
</style>